<template>
	<s-layout :bgStyle="{ color: '#F45B6E' }" :title="`IM活动 - ${state.luckyInfo.title}`"
	          :show-menu-button="false" navbar="inner">
		<!--<s-notice-lucky-block :data="noticeInfo"/>-->
		<LuckyWheel
				ref="luckyWheelRef"
				:blocks="blocks"
				:buttons="buttons"
				width="400px"
				height="400px"
				:default-config="defaultConfig"
				:defaultStyle="defaultStyle"
				:prizes="state.luckyInfo.prizesPreviewList"
				class="panel"
				@end="endCallBack"
				@start="startCallBack"
		/>
		<mp-html :content="state.luckyInfo.ruleInfo" class="notice"></mp-html>
	</s-layout>
</template>


<script setup>
import {onMounted, reactive, ref} from 'vue';
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel';
import sheep from "@/sheep";
import {onLoad} from "@dcloudio/uni-app";

const noticeInfo = ref({
	title: ''
});

const blocks = ref([{
	padding: '20px',
	background: '#FF7002',
},
	{
		padding: '20px',
		background: '#efbea4',
	}]);

const buttons = ref([{
	radius: '32.8%',
	imgs: [{
		src: 'https://img.iwave.net.cn/jeep/8e38bb871f79ef8950da8697603cde94.png',
		top: '-60px',
		width: '100px',
		height: '100px'
	}]
}]);

const defaultConfig = reactive({
	gutter: '5px',
})
const defaultStyle = reactive({
	background: '#f3e6df',
})

const state = reactive({
	luckyInfo: {},
	luckyResult: {},
	start: false,
})

const luckyWheelRef = ref(null);

// 将奖品处理成 LuckyWheel 可接受的格式
onMounted(async () => {

});

onLoad(async (options) => {
	console.log('options:', options);
	const configId = options.id;
	if (sheep.$helper.isRealEmpty(configId)) {
		uni.showModal({
			title: '提示',
			content: '参数错误, 请重新进入',
			showCancel: false,
			success: function (res) {
			}
		});
	} else {
		sheep.$api.lucky.getMemberLuckyConfig(configId).then(res => {
			state.luckyInfo = res.data;
			state.luckyInfo.prizeList = JSON.parse(state.luckyInfo.configJson);
			state.luckyInfo.prizesPreviewList = state.luckyInfo.prizeList.map(item => ({
				fonts: [{
					text: item.title,
					top: '30%',
					fontColor: '#FF7002',
					fontSize: '13px',
					fontWeight: 600,
					wordWrap: true,
					lineHeight: '0.613rem'
				}],
				imgs: [{src: item.icon, top: '60%', width: '1.3rem', height: '1.4rem'}]
			}));
		});
		/*sheep.$api.lucky.getMemberLuckyConfigLog({
			pageNum: 1,
			pageSize: 1,
		}).then(res => {
			let data = res.rows[0];
			console.log(data, 'logInfo')
			noticeInfo.title = `🎉恭喜【会员${data.createBy}】中奖【${data.remark}】`
		});*/
	}
})

function startCallBack() {
	if (state.start == true) {
		sheep.$helper.toast('正在抽奖中, 请勿重复点击')
		return;
	}
	state.start = true;
	sheep.$api.lucky.randomLucky({
		luckyConfigId: state.luckyInfo.id
	}).then(res => {
		state.luckyResult = res.data;
		luckyWheelRef.value.play();
		setTimeout(() => {
			luckyWheelRef.value.stop(res.data.randomNumber);
		}, 5000);
	}).catch(err => {
		state.start = false;
	});
}

function endCallBack(prize) {
	state.start = false;
	let content;
	if (state.luckyResult.prizeDTO.type == '-1') {
		content = `本次参与活动结果【${state.luckyResult.prizeDTO.title}】`;
	} else {
		content = `本次参与活动结果【${state.luckyResult.prizeDTO.title}】*${state.luckyResult.prizeDTO.num}`;
	}
	uni.showModal({
		title: '提示',
		content: content,
		showCancel: false,
		success: function (res) {
		}
	});
}
</script>


<style lang="scss" scoped>
.panel {
	margin-top: 20rpx;
}

.notice {
	margin-top: 40rpx;
	margin-bottom: 40rpx;
	width: 90%;
	margin-left: 5%;
	border-radius: 20rpx;
	background-color: #FFFFFF;
}

</style>
